<script setup>
import CommonAside from "@/components/CommonAside.vue";
import CommonHeader from "../components/CommonHeader.vue";
</script>

<template>
    <!-- <h1>This is Main</h1> -->
    <div class="common-layout">
        <el-container class="lay-container">
            <!-- 自定义左侧的组件 -->
            <common-aside/>

            <el-container>
                    <!-- 自定义头部组件 -->
                    <el-header class="el-header">
                        <!-- right-header -->
                        <common-header/>
                    </el-header>
                    <!-- 自定义主要内容组件 -->
                    <el-main class="right-main">
                        <!-- right-main -->
                        <router-view></router-view>
                    </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<style scoped lang="less">
    .common-layout,.lay-container{
        height:100vh;
    }
    .el-header{
        background-color:#333
    }
</style>